<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="java.util.HashMap" %>
	
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>信息列表</title>
<%
	pageContext.setAttribute("APP_PATH", request.getContextPath());
	String customerId =request.getParameter("customerId");
	//out.println(customerId);

%>

<!-- web路径：
不以/开始的相对路径，找资源，以当前资源的路径为基准，经常容易出问题。
以/开始的相对路径，找资源，以服务器的路径为标准(http://localhost:3306)；需要加上项目名
		http://localhost:3306/crud
 -->
<script type="text/javascript" src="${APP_PATH }/static/jquery/jquery-1.12.4.min.js"></script>
<link
	href="${APP_PATH }/static/bootstrap-3.3.7/css/bootstrap.min.css"
	rel="stylesheet">
<script src="${APP_PATH }/static/bootstrap-3.3.7/js/bootstrap.min.js"></script>
</head>
<body>


	<!-- 搭建显示页面 -->
	<div class="container">
		
		 <div class="form-group">
             <label class="col-sm-2 control-label" style="text-align:right;">姓名</label>
             <div class="col-sm-3">
                 <input type="text" class="form-control" id="customerName" name="customerName"/>
             </div>
	    
             <label class="col-sm-2 control-label" style="text-align:right;">电话号码</label>
             <div class="col-sm-3">
                 <input type="text" class="form-control" id="phone" name="phone"/>
             </div>
	    	<div class="col-sm-2">
				<button class="btn btn-primary" id="case_query_btn">查询</button>
				<button class="btn btn-primary" id="case_add_modal_btn">新增</button>
			</div>
		</div>
		<br>
		<br>
		<!-- 显示表格数据 -->
		<div class="row">
			<div class="col-sm-12">
				<table class="table table-hover" id="cases_table">
					<thead>
						<tr>
							
							<th>采集日期</th>
							<th>姓名</th>
							<th>性别</th>
							<th>电话号码</th>
							<th>治疗医院</th>
							<th>事故类型</th>
							<th>劳动合同</th>
							<th>社保</th>
							<th>工资方式</th>
							<th>住院日期</th>
							<th>出院日期</th>
						</tr>
					</thead>
					<tbody>
					
					</tbody>
				</table>
			</div>
		</div>

		<!-- 显示分页信息 -->
		<div class="row">
			<!--分页文字信息  -->
			<div class="col-sm-6" id="page_info_area"></div>
			<!-- 分页条信息 -->
			<div class="col-sm-6" id="page_nav_area">
				
			</div>
		</div>
		
	</div>
	<script type="text/javascript">
	
		var totalRecord,currentPage;
	    var dictMap={};
		//1、页面加载完成以后，直接去发送ajax请求,要到分页数据
		$(function(){
			//去首页
			to_page(1);
		});
		//点击新增按钮弹出模态框。
		$("#case_query_btn").click(function(){
			to_page(1);
		});
		
		function to_page(pn){
			$.ajax({
				url:"${APP_PATH}/case/list",
				data:"pn="+pn+"&customerId=${customerId}"+"&customerName"+$("#customerName").val()+"&phone="+$("#phone").val(),
				type:"GET",
				success:function(result){
					var dicts = result.extend.dicts;
					
					for(var i=0;i<dicts.length;i++){
						dictMap[dicts[i].value] = dicts[i].name;
					}
					//1、解析并显示员工数据
					build_cases_table(result);
					//2、解析并显示分页信息
					build_page_info(result);
					//3、解析显示分页条数据
					build_page_nav(result);
				}
			});
		}
		
		function build_cases_table(result){
			//清空table表格
			$("#cases_table tbody").empty();
			var cases = result.extend.pageInfo.list;
			
			$.each(cases,function(index,item){
				
			
				var collectDateTd = $("<td></td>").append(item.collectDate);
				var customerNameTd = $("<td></td>").append(item.customerName);
				var genderTd = $("<td></td>").append(item.gender=='1'?"男":"女");
				var phoneTd = $("<td></td>").append(item.phone);
				var hospitalTd = $("<td></td>").append(dictMap[item.hospital]);
				var accidentTypeTd = $("<td></td>").append(dictMap[item.accidentType]);
				var hasContractTd = $("<td></td>").append(item.hasContract=='1'?"有":"无");
				var hasInsuranceTd = $("<td></td>").append(item.hasInsurance=='1'?"有":"无");
				var wageTypeTd = $("<td></td>").append(item.wageType=='1'?"打卡":"现金");
				var inHospitalDateTd = $("<td></td>").append(item.inHospitalDate);
				var leaveHospitalDateTd = $("<td></td>").append(item.leaveHospitalDate);
				var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
							  .append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("修改");
				//为编辑按钮添加一个自定义的属性，来表示当前员工id
				editBtn.attr("edit-id",item.customerId);

				var remarkBtn = $("<button></button>").addClass("btn btn-primary btn-sm remark_btn")
								.append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("备注");
				//为编辑按钮添加一个自定义的属性，来表示当前员工id
				remarkBtn.attr("remark-id",item.customerId);
				var delBtn =  $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
								.append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");
				//为删除按钮添加一个自定义的属性来表示当前删除的员工id
				delBtn.attr("del-id",item.customerId);
				var btnTd = $("<td></td>").append(editBtn).append(" ").append(remarkBtn).append(" ").append(delBtn);
				//var delBtn = 
				//append方法执行完成以后还是返回原来的元素
				$("<tr></tr>").append(collectDateTd)
					.append(customerNameTd)
					.append(genderTd)
					.append(phoneTd)
					.append(hospitalTd)
					.append(accidentTypeTd)
					.append(hasContractTd)
					.append(hasInsuranceTd)
					.append(wageTypeTd)
					.append(inHospitalDateTd)
					.append(leaveHospitalDateTd)
					.append(btnTd)
					.appendTo("#cases_table tbody");
			});
		}
		//解析显示分页信息
		function build_page_info(result){
			$("#page_info_area").empty();
			$("#page_info_area").append("当前"+result.extend.pageInfo.pageNum+"页,总"+
					result.extend.pageInfo.pages+"页,总"+
					result.extend.pageInfo.total+"条记录");
			totalRecord = result.extend.pageInfo.total;
			currentPage = result.extend.pageInfo.pageNum;
		}
		//解析显示分页条，点击分页要能去下一页....
		function build_page_nav(result){
			//page_nav_area
			$("#page_nav_area").empty();
			var ul = $("<ul></ul>").addClass("pagination");
			
			//构建元素
			var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
			var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
			if(result.extend.pageInfo.hasPreviousPage == false){
				firstPageLi.addClass("disabled");
				prePageLi.addClass("disabled");
			}else{
				//为元素添加点击翻页的事件
				firstPageLi.click(function(){
					to_page(1);
				});
				prePageLi.click(function(){
					to_page(result.extend.pageInfo.pageNum -1);
				});
			}
			
			
			
			var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
			var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
			if(result.extend.pageInfo.hasNextPage == false){
				nextPageLi.addClass("disabled");
				lastPageLi.addClass("disabled");
			}else{
				nextPageLi.click(function(){
					to_page(result.extend.pageInfo.pageNum +1);
				});
				lastPageLi.click(function(){
					to_page(result.extend.pageInfo.pages);
				});
			}
			
			
			
			//添加首页和前一页 的提示
			ul.append(firstPageLi).append(prePageLi);
			//1,2，3遍历给ul中添加页码提示
			$.each(result.extend.pageInfo.navigatepageNums,function(index,item){
				
				var numLi = $("<li></li>").append($("<a></a>").append(item));
				if(result.extend.pageInfo.pageNum == item){
					numLi.addClass("active");
				}
				numLi.click(function(){
					to_page(item);
				});
				ul.append(numLi);
			});
			//添加下一页和末页 的提示
			ul.append(nextPageLi).append(lastPageLi);
			
			//把ul加入到nav
			var navEle = $("<nav></nav>").append(ul);
			navEle.appendTo("#page_nav_area");
		}
		
		
	
	
		
		//单个删除
		$(document).on("click",".delete_btn",function(){
			//1、弹出是否确认删除对话框
			var empName = $(this).parents("tr").find("td:eq(1)").text();
			var empId = $(this).attr("del-id");
			//alert($(this).parents("tr").find("td:eq(1)").text());
			if(confirm("确认删除【"+empName+"】吗？")){
				//确认，发送ajax请求删除即可
				$.ajax({
					url:"${APP_PATH}/case/"+empId,
					type:"DELETE",
					success:function(result){
						alert(result.msg);
						//回到本页
						to_page(currentPage);
					}
				});
			}
		});
		
		//完成全选/全不选功能
		$("#check_all").click(function(){
			//attr获取checked是undefined;
			//我们这些dom原生的属性；attr获取自定义属性的值；
			//prop修改和读取dom原生属性的值
			$(".check_item").prop("checked",$(this).prop("checked"));
		});
		
		//check_item
		$(document).on("click",".check_item",function(){
			//判断当前选择中的元素是否5个
			var flag = $(".check_item:checked").length==$(".check_item").length;
			$("#check_all").prop("checked",flag);
		});
		
		//点击新增按钮弹出模态框。
		$("#case_add_modal_btn").click(function(){
			self.location='caseinput.jsp';
		});
		//修改基本信息
		$(document).on("click",".edit_btn",function(){
			var customerId = $(this).attr("edit-id");
			self.location="${APP_PATH}/case/edit/"+customerId;
		});
		//备注
		$(document).on("click",".remark_btn",function(){
			var customerId = $(this).attr("remark-id");
			self.location="${APP_PATH}/caseremark/init/"+customerId;
		});
	</script>
</body>
</html>